import 'package:demo202112/utils/common_appbar.dart';
import 'package:flutter/material.dart';

/// @Author wywinstonwy
/// @Date 2022/10/25 09:53
/// @Description: 

class StaggeredAnimationPage extends StatefulWidget {
  const StaggeredAnimationPage({Key? key}) : super(key: key);

  @override
  State<StaggeredAnimationPage> createState() => _StaggeredAnimationPageState();
}

class _StaggeredAnimationPageState extends State<StaggeredAnimationPage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _width;
  late Animation<double> _height;
  late Animation<Color> _color;
  late Animation<double> _border;
  late Animation<BorderRadius> _borderRadius;

 void _play(){
   if(_controller.isCompleted){
     _controller.reverse();
   }else{
     _controller.forward();
   }
 }
 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(vsync: this,
    duration: Duration(seconds:5)
    );
    //宽度变化
    _width = Tween<double>(begin: 100,end: 300).animate(CurvedAnimation(
      parent: _controller,
      curve:Interval(0.0, 0.2,curve: Curves.ease),
    ));
    //高度变化
   _height = Tween<double>(begin: 100,end: 300).animate(
     CurvedAnimation(
       parent: _controller,
       curve: Interval(0.2,0.4,curve: Curves.ease)
     )
   );
   //颜色变化
    _color = Tween<Color>(begin: Colors.blue,end: Colors.yellow).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(0.4,0.6,curve: Curves.ease)
      )
    ) ;

    _borderRadius = Tween(
      begin: BorderRadius.circular(0.0),
      end: BorderRadius.circular(150.0),
    ).animate(CurvedAnimation(parent: _controller,
        curve: Interval(0.6,0.8,curve: Curves.ease)
    )) ;

    _border = Tween<double>(
      begin: 0,
      end: 25,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(0.8, 1.0),
      ),
    );




  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('交织动画')),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, Widget? child) {
            return Container(
              width: _width.value,
              height: _height.value,
              decoration: BoxDecoration(
                color: _color.value,
                borderRadius: _borderRadius.value,
                border: Border.all(
                  width: _border.value,
                  color: Colors.cyanAccent
                )
              ),
            );
          },

        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _play,
        child: Icon(Icons.refresh),
      ),
    );
  }
}
